<template>
	<div class="twoPage">
		<div class="explain">
			<p class="exp_title">
				<span>微信售票机用途之二：互联网取票</span>
				<i></i>
			</p>
			<div class="explain_cont">
				<i><img src="../../assets/fiveuse/autosell-img2.png"></i>
				<ul>
					<li>
						<p>游客在行前通过<font>电商预订门票</font>，到达景区后使用微信取票机自助换取景区门票的过程。解决了互联网电商众多，景区工作人员忙不过来的麻烦，消解<font>客人排队</font>换票的烦恼，提升游客<font>现场体验</font>后可提高线上预订率</p>
					</li>
					<li>
						<p>适用渠道：OTA、团购、淘宝、旅行社、</p>
						<p>农家乐等各类景区的代理渠道</p>
					</li>
				</ul>
			</div>
		</div>
		<Vending></Vending>
		<Advance></Advance>
	</div>	
</template>

<script>
import Vending from '../../components/FiveUse/Vending'
import Advance from '../../components/FiveUse/AdvanceOrder'
	export default{
		name:'onePage',
		components:{
			Vending,
			Advance
		}
	}
</script>

<style scoped>
@media only screen and (min-width: 1000px){
	.twoPage{
		width: 100%;
		margin-top: 70px;
	 
	}
	.explain{
		width: 1000px;
		margin: 0 auto;
	}
	.exp_title{
		text-align: center;
	}
	.exp_title span{
		font-size:26px;
		color: #4d4845;
		display: block;
	}
	.exp_title i{
		display: inline-block;
		width: 50px;
		height: 2px;
		background-color: #4d4845;
	}
	.explain_cont{
		width: 100%;
		overflow:hidden;
		margin-top:40px;
		margin-bottom: 95px;
	}
	.explain_cont i{
		display: inline-block;
		width:430px;
		height: 430px;
		float: left;
	}
	.explain_cont i img{
		width: 100%;
	}

	.explain_cont ul{
		display: inline-block;
		width: 500px;
		float: left;
	}
	.explain_cont ul li{
		float: left;
		width: 100%;
		text-align: center;
		
	}
	.explain_cont ul li p{
		line-height: 30px;
	}
	.explain_cont ul li:nth-child(1){
		font-size: 18px;
		color:#4d4845;
		margin-top: 70px;
		 

	}
	.explain_cont ul li:nth-child(1) font{
		font-size: 24px;

	}
	.explain_cont ul li:nth-child(1) p{
		padding:0 40px;
	}
	.explain_cont ul li:nth-child(2){
		font-size: 18px;
		color:#00ade6;
		margin-top: 40px;
		
	}
}


</style>